<template>
	<view>
		<u-navbar :title="$t('my.set_nickname')" placeholder bgColor="#0fbc96" leftIconColor="#FFFFFF"
			titleStyle="color: #FFFFFF" autoBack>
		</u-navbar>

		<view class="content">
			<up-form :model="formData" :rules="rules" labelWidth="auto" :labelStyle="labelStyle" labelPosition="top"
				ref="uFormRef">
				<up-form-item :label="$t('my.nickname')" prop="nickname">
					<up-input v-model="formData.nickname" :placeholder="$t('my.please_enter_nickname')" border="none" />
				</up-form-item>
				<up-line color="#2e3546"></up-line>
			</up-form>
			<view class="mar-top-80">
				<up-button color="#ffc820" :customStyle="customStyle"
					@click="submit">{{$t('my.confirm_modifications')}}</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n';
	import {
		updateBase
	} from '@/api/user'
	import {
		useStore
	} from '@/store/commonStore'

	const {
		t
	} = useI18n()
	const store = useStore()
	// 响应式表单数据  
	const formData = reactive({
		nickname: store.userInfo.nickname || "",
	});

	const labelStyle = {
		color: '#edad14',
		margin: '20rpx 0'
	}

	const customStyle = {
		color: '#000000',
		borderRadius: '20rpx',
		boxShadow: '0 1.2077vw 10rvw rgba(75, 98, 157, .11)'
	}

	// 校验规则  
	const rules = {
		nickname: [{
			required: true,
			message: t('my.please_enter_nickname'),
			trigger: ['blur'],
		}, ],
	};

	// 表单引用  
	const uFormRef = ref(null);

	const validate = () => {
		return new Promise((resolve, reject) => {
			uFormRef.value.validate().then(res => {
				resolve(true)
			}).catch(err => {
				uni.$u.toast(t('my.please_complete_information'))
				reject(err)
			})
		})
	}

	// 提交方法
	const submit = async () => {
		const result = await validate()
		const res = await updateBase(formData)
		if (res.code === 200) {
			uni.$u.toast(t('my.operation_successful'));
			uni.navigateBack();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 40rpx 25rpx 0 25rpx;
		box-sizing: border-box;
	}
</style>